<template>
  <n-layout>
    <n-layout-header style="height: 64px; " bordered>
      <n-grid cols="10" item-responsive :x-gap="12">
        <n-grid-item :span="6" :offset="1">
          <div>
            <TopMenu />
          </div>
        </n-grid-item>
      </n-grid>
    </n-layout-header>
  </n-layout>
  <!-- <n-layout has-sider position="absolute" style="top: 64px; bottom: 64px"> -->

  <n-layout has-sider position="absolute" style="top: 64px; ">
    <n-layout-content :native-scrollbar="false">
      <n-back-top :right="100" />
      <n-grid cols="10" item-responsive :x-gap="12" style="padding-top: 20px;">
        <n-grid-item :span="6" :offset="1">
          <div>
            <RouterView />
          </div>
        </n-grid-item>
        <n-grid-item :span="2">
          <n-affix :listen-to="() => containerRef">
            <div>
              <n-carousel direction="vertical" dot-placement="right" dot-type="line" mousewheel draggable autoplay
                style="width: 100%;  height: 300px">
                <img class="carousel-img"
                  src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg">
                <img class="carousel-img"
                  src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg">
                <img class="carousel-img"
                  src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg">
                <img class="carousel-img"
                  src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg">
              </n-carousel>
            </div>
          </n-affix>
        </n-grid-item>
      </n-grid>
    </n-layout-content>
  </n-layout>
</template>

<style scoped>
.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

<script setup lang="ts">
import TopMenu from '@/components/menu/TopMenu.vue'
import { NFlex } from 'naive-ui';
import { RouterView } from 'vue-router'
import { ref } from 'vue'
const containerRef = ref<HTMLElement | undefined>(undefined)
</script>
